<template>
	<view class="fun-flex-col page">
		<image class="image_5" :src="newsData.imgUrl" />
		<view class="content">
			<text class="title">{{newsData.title}}</text>
			<view class="time">{{UTILS.setDateFormat(newsData.pubTime)}}</view>
			<view class="group_2" v-html="newsData.content"></view>
		</view>
	</view>
</template>

<script>
	import {newsContent} from "@/api/more.js"
	export default {
		data() {
			return {
				queryData:{
					newsId:null,
					timeZone:8
				},
				newsData:{}
			};
		},
		
		onLoad(option) {
			this.queryData.newsId = this.UTILS.stringToNum(decodeURIComponent(option.newsId)) || null;
			this.queryData.timeZone = this.UTILS.getTimeZone();
			this.getNewsContent()
		},

		methods: {
			getNewsContent(){
				newsContent(this.queryData).then(res => {
					if(res.code == 0){
						this.newsData = res?.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 32rpx;
		.image_5 {
			width: 100%;
			height: 264rpx;
		}

		.content {
			margin-top: 30rpx;
			.title {
				color: #1d1d25;
				font-size: 32rpx;
				font-weight: bold;
			}
			.time {
				margin: 28rpx 0;
				color: #7f7f7f;
				font-size: 24rpx;
				font-family: Inter;
			}
		}
	}
</style>